<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box {
          width: 200px;
          height: 200px;
          background-color: khaki;
        }
        .mask {
          /* 从上到下，黑色到白色的渐变 */
          mask-image: linear-gradient(#000, #fff);
          mask-mode: luminance; /* 黑的部分不可见，白的部分可见 */
        }
      </style>

      <!-- TIP
        使用图像的亮度值作为遮罩依据。也就是亮（白） 的区域使元素更可见，较暗（黑） 的区域使元素更透明
        适用于渐变 或 黑白遮罩图像
        -->
      <div class="box mask"></div>
</body>
</html>